<template>
  <view style="display: flex;position: relative">
    <image :src="imgMinioPath + '/pco/school-back-new.png'" class="background"/>
    <view class="index-all">
      <view :style="{marginTop:topHeight.top / 2 +'px'}" class="index-box">
        <view class="s-school-title">
          <view class="s-name">{{ userInfo.user.nickName }}</view>
          <view class="s-welcome">欢迎登录！</view>
          <view class="s-select" @click="openPicker"><text>{{pickerVal}}</text><uv-icon name="arrow-down-fill" color="#fff" size="18rpx"></uv-icon></view>
        </view>
        <view class="index_title">鼠(虫)有害生物<br/>监测预警系统</view>

        <view class="s-school-warn">
          <image src="@/static/image/pco-WuNntS-left.png" class="s-warn-img left"/>
          <view>
            <view class="s-warn-center">
              <view class="right">待督办<text>{{waitDealData}}</text>条</view>
            </view>
            <view class="s-warn-bottom"  @click="clickTo('/packagePcoCheck/pages/alarmInfo/index')"><text>点击办理</text><uv-icon name="arrow-right" color="#1579FA" bold class="arrow-right"></uv-icon></view>
          </view>
        </view>
        <view class="index-box-three">
          <view class="title-tab">
            <view class="title-tab-left">
              <image :src="imgMinioPath + '/pco/index-box-three3.png'" class="title-img"/>
              <span>预警概况</span>
            </view>
          </view>
          <view class="list-four">
            <view class="list-four-item" @click="clickTo('/packagePcoCheck/pages/alarmInfo/alarmRecord')">
              <image :src="imgMinioPath + '/pco/icon5.png'" class="list-four-img"/>
              <view class="list-four-num">
                <text>{{ schoolIds.length||0}}</text>
                所
              </view>
              <view class="list-four-name">
                学校数量
              </view>
            </view>
            <view class="list-four-item"  @click="clickTo('/packagePcoCheck/pages/alarmInfo/alarmRecord')">
              <image :src="imgMinioPath + '/pco/icon6.png'" class="list-four-img"/>
              <view class="list-four-num">
                <text>{{ toDos.schoolNum }}</text>
                所
              </view>
              <view class="list-four-name">
                预警学校
              </view>
            </view>
            <view class="list-four-item"  @click="clickTo('/packagePcoCheck/pages/alarmInfo/alarmRecord')">
              <image :src="imgMinioPath + '/pco/icon1.png'" class="list-four-img"/>
              <view class="list-four-num">
                <text>{{ toDos.alarmNum }}</text>
                条
              </view>
              <view class="list-four-name">
                预警总数
              </view>
            </view>
            <view class="list-four-item" @click="clickTo('/packagePcoCheck/pages/alarmInfo/alarmRecord')">
              <image :src="imgMinioPath + '/pco/icon4.png'" class="list-four-img"/>
              <view class="list-four-num">
                <text>{{ toDos.warnRate }}</text>
                %
              </view>
              <view class="list-four-name">
                整改率
              </view>
            </view>
          </view>
        </view>
        <view class="index-box-four">
          <view class="title-tab">
            <view class="title-tab-left">
              <image :src="imgMinioPath + '/pco/icon7.png'" class="title-img"/>
              <span v-if="user.org.county">各学校预警情况</span>
              <span v-else>各地区预警情况</span>
            </view>
          </view>
          <view class="bottom">
						<view v-if="emptyFlag" class="table-empty">
							<image :src="imgMinioPath + '/pco/index-table-empty.png'" class="empty-image"  mode="aspectFill"/>
						</view>
            <view v-for="(item, index) in warningArea" :key="index" class="bottom-item">
              <view class="yjqk-left">
                <image v-if="item.number > 0" :src="imgMinioPath + '/pco/lawicon1.png'" class="yjqk-left-img"/>
                <image v-else :src="imgMinioPath + '/pco/lawicon2.png'" class="yjqk-left-img"/>
              </view>
              <view class="yjqk-cont">
                {{ item.name }}
              </view>
              <view class="yjqk-right">
                <text :style="{color: item.number == 0 ? '#8BA8D6' :'#EB7107' }">{{ item.number }}</text>隐患
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view>
      <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
    </view>
    <Tabbar type="pcoLaw"></Tabbar>
  </view>
</template>

<script setup>
import {ref, getCurrentInstance} from 'vue';
import config from '@/common/config';
import {onShow} from '@dcloudio/uni-app'
import homeAnalysis from '@/api/pco/homeAnalysis/homeAnalysis'
import api from "@/api/pco/alarm/alarmInfo";

const userInfo = ref(uni.getStorageSync('userInfo'));
const {proxy} = getCurrentInstance();
let user = ref({});
let imgMinioPath = ref(config.IMG_MINIO_PATH);
let toDos = ref({
  alarmNum:0,
  schoolNum:0,
  warnRate:0
});
let totalSchool = ref(0);
let areaCode = ref("");
let emptyFlag = ref(false);
let warningArea = ref([]);
// 预警整改
let getAlarmDealAnalysis = async () => {
  let res = await proxy.http.asyncPost(homeAnalysis.getAlarmDealAnalysis,{areaCode:areaCode.value,params:{schoolIds:schoolIds.value}});
  if (res.code === 0) {
    toDos.value={...res.data};
  }
}

// 获取学校总数
let schoolIds =  ref([]);
let getSchoolData= async (callback) => {
  let query = {
    dataScopeType: '1',
    sourceType: '02',
    orgDistrictId:user.value.orgId,
  };
  let res = await proxy.http.asyncPost(homeAnalysis.getDataScopeInfoNoTenantId,query);
  if (res.code === 0) {
    let  ids = res.data.choose || [];
    if (ids.length > 0) {
    let res = await proxy.http.asyncPost(homeAnalysis.getOrgSchoolPage,{pageNum: -1,pageSize: -1,regulatoryUnitCode:user.value.org.county?'area':'',params:{ids:ids}});
      if (res.code === 0) {
        let orgSchoolData=res.data.records||[];
        if(user.value.org.city){
          schoolIds.value = orgSchoolData.filter(item=>item.regulatoryUnitCode != "province").map(item => item.id);
        }else{
          schoolIds.value = orgSchoolData.map(item => item.id);
        }
        callback();
      }
    }
  }
};

let areaList =  ref([]);
let getAreaTree = (callback) => {
  areaList.value =[];
  if(areaCode.value.length==6){
    proxy.http.post(homeAnalysis.findOne,{code:areaCode.value}).then(res => {
      if(res.code === 0) {
        areaList.value.push({name:res.data.name,code:res.data.code})
        callback();
      }
    })
  }else{
    proxy.http.post(homeAnalysis.getParentCode(areaCode.value)).then(res => {
      if(res.code === 0) {
       res.data.forEach(item=>{
         areaList.value.push({name:item.name,code:item.code})
       });
        callback();
      }
    })
  }

};

let getAlarmAreaNum = async () => {
  warningArea.value =[];
  let res = await proxy.http.asyncPost(homeAnalysis.getAlarmAreaNum,{areaCode:areaCode.value,params:{schoolIds:schoolIds.value}});
  if (res.code === 0) {
    // 创建一个 Map，键为 areaCode，值为 warningAreaNum
    const areaMap = res.data.reduce((map, item) => {
      map[item.areaCode] = item.warningAreaNum;
      return map;
    }, {});
    // 构建 warningArea 数组
    warningArea.value = areaList.value.map(area => ({
      name: area.name,
      number: areaMap[area.code] || 0
    }));
    // 排序 warningArea 数组
    warningArea.value.sort((a, b) => b.number - a.number);
  }


}
let getAlarmMapNum = async () => {
  warningArea.value =[];
  let res = await proxy.http.asyncPost(homeAnalysis.getAlarmMapNum, {params:{schoolIds:schoolIds.value}});
  if (res.code === 0) {
     // 构建 warningArea 数组
    warningArea.value = res.data.map(item => ({
      name: item.schoolName,
      number: item.warningAreaNum || 0
    }));
    // 排序 warningArea 数组
    warningArea.value.sort((a, b) => b.number - a.number);
  }
  if(warningArea.value.length==0){
    emptyFlag.value=true;
  }
}



let waitDealData =  ref(0);
let getListData = () => {
  let queryForm={
    pageSize: -1,
    pageNum: -1,
    userId :user.value.id,
    orgId : user.value.orgId,
    params:{
      state:3,
    }
  };
  proxy.http.post(api.alarmList, queryForm).then(res => {
    if (res.code === 0) {
      waitDealData.value = res.data.records.length;
   }
  })
}

// 预警整改
let clickTo = async (path) => {
  if (path) {
    uni.navigateTo({
      url: path
    })
  } else {
    uni.showToast({title: '敬请期待!', icon: 'none'});
  }
};


const {tabbar} = proxy.store();
onShow(() => {
  tabbar.$patch(state => {
    state.type = 'pcoLaw';
  })
  user.value = uni.getStorageSync("userInfo").user;
  areaCode.value=user.value.org.province;
  if (user.value.org.city) {
    areaCode.value = user.value.org.city;
  }
  if (user.value.org.county) {
    areaCode.value =user.value.org.county;
  }
  getSchoolData(() => {
    // 预警整改
    getAlarmDealAnalysis();
    if(user.value.org.county){
      getAlarmMapNum();
    }else{
      getAreaTree(() => {
        getAlarmAreaNum();
      });
    }
  });
  getListData();
})
// 下拉全部
const columns = [
  ['全部','中国', '美国', '日本']
]
const pickerVal = ref('全部')
function openPicker() {
  proxy.$refs.picker.open();
}
function confirm(e) {
  pickerVal.value = e.value[0]
}

// #ifdef MP-WEIXIN
uni.hideTabBar();
// #endif
</script>

<style lang="scss" scoped>
.title-all-left {
  font-weight: 700 !important;
}

.s-school-title {
  height: 78rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  margin: 24rpx 0 10rpx;
  .s-select {
    display: flex;
    align-items: center;
    color: #fff;
    gap: 0 10rpx;
    margin-left: 30rpx;
  }
  .s-left {
    background: rgba(255, 255, 255, 0.5);
    padding: 5rpx 10rpx;
    font-size: 20rpx;
    color: #1579FA;
  }

  .s-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #FFFFFF;
  }

  .s-welcome {
    margin-left: 15rpx;
    font-size: 28rpx;
    color: #FFFFFF;
  }
}

.s-school-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;

  .s-school-btn {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 212rpx;
    height: 186rpx;
    border-radius: 16rpx;
    background: #FFFFFF;

    .s-btn-img {
      width: 116rpx;
      height: 90rpx;
    }

    .s-btn-wp {
      width: 82rpx;
      height: 82rpx;
    }

    .num {
      width: 42rpx;
      height: 28rpx;
      border-radius: 16rpx 16rpx 16rpx 0px;
      background: #DE461D;
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      font-size: 20rpx;
      color: #FFFFFF
    }

    .name {
      font-size: 28rpx;
      font-weight: bold;
      color: #3D3D3D;
      margin-top: 20rpx;
    }
  }
}

.s-school-deal {
  display: flex;
  background: #fff;
  align-items: center;
  justify-content: space-between;
  margin: 24rpx 0;
  padding: 26rpx 24rpx;
  border-radius: 16rpx;

  .left {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #1D2129;

    .deal-img {
      width: 42rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }
  }

  .right {
    display: flex;
    align-items: center;
    color: #86909C;
    font-size: 28rpx;

    .waitDealData {
      font-size: 48rpx;
      font-weight: bold;
      color: #1579FA;
      margin: 0 15rpx;
      display: flex;
      align-items: center;

      text {
        font-size: 28rpx;
        margin-left: 15rpx;
      }
    }
  }
}

.s-school-warn {
  padding: 34rpx 0;
  height: 186rpx;
  position: relative;
  transform: translateX(32rpx);
  border-radius: 16rpx;
  display: flex;
  justify-content: flex-end;
  box-sizing: content-box;
  .s-warn-top {
    font-size: 36rpx;
    font-weight: bold;
    color: #FFFFFF;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
    margin-bottom: 15rpx;
  }

    .s-warn-center {
      font-size: 32rpx;
      font-weight: bold;
      color: #FAFDFF;
      text-shadow: 1px 0 1px rgba(0, 0, 0, 0.3);
      margin: 0 0 10rpx;
      .right{
        display: flex;
        align-items: baseline;
        gap: 0 5rpx;
        padding: 10rpx;
        font-size: 28rpx;
        margin-top: 5rpx;
      }
      text {
        margin:0 5rpx;
        font-weight: 500;
        font-size: 64rpx;
        text-shadow: 2px 0 2px #0B6DEB;
      }
    }

  .s-warn-bottom {
    width: 312rpx;
    height: 74rpx;
    border-bottom-left-radius: 50rpx;
    border-top-left-radius: 50rpx;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 32rpx;
    color: #1579FA;
    font-weight: 500;
    box-sizing: border-box;
    padding-left: 62rpx;
    line-height: 1;
    background: linear-gradient(270deg, rgba(222, 237, 255, 0.1) -4%, rgba(255, 255, 255, 0.6) 48%, #FFFFFF 100%);
    & > .arrow-right {
      padding-left: 16rpx;
    }
  }

    .s-warn-img {
      position: absolute;
      width: 510.4rpx;
      height: 281.6rpx;
      &.left {
        left: -95rpx;
        top: 0;
      }
      &.right {
        right: -95rpx;
        top: 100rpx;
      }
    }
  }

.index-all {
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #F1F6FF;
  height: calc(100vh - 102rpx);
}

.background {
  width: 100%;
  flex: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100vh;
}

.index-box {
  z-index: 1;
  width: 100vw;
  padding: 0 32rpx 32rpx 32rpx;
  box-sizing: border-box;

  .index_title {
    background: linear-gradient(0deg, #C1E9FF 10%, #FFFFFF 33%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-size: 48rpx;
    font-weight: bold;
    padding: 0 8rpx 10rpx;

  }

  .index-box-one {
    width: 100%;
    margin: 28rpx 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0 16rpx;
    font-size: 28rpx;
    color: #3D3D3D;
    font-weight: 600;

    :deep(.badge) {
      .uv-badge {
        border-bottom-left-radius: 0
      }

      .uv-badge--not-dot {
        padding: 2px 7px;
      }

      .uv-badge--error {
        background-color: #DE461D;
      }
    }

    &-item {
      //flex: 1;
      border-radius: 16rpx;
      background-color: #FFFFFF;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6rpx 22rpx;
      position: relative;

      image {
        margin-bottom: 16rpx;

        &:nth-child(1) {
          width: 116rpx;
          height: 88rpx;
        }
      }
    }
  }

  .index-box-two {
    width: 100%;
    border-radius: 16rpx;
    background-image: url("@/static/image/index/index-box-back.png");
    background-size: 100% 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    height: 140rpx;
    display: flex;
    flex-direction: column;
    font-size: 32rpx;
    justify-content: center;

    text {
      &:nth-child(1) {
        font-weight: bold;
      }

      &:nth-child(2) {
        padding-top: 5rpx;
        color: #F15252;
      }
    }
  }

  .index-box-three {
    width: 100%;
    border-radius: 16rpx;
    background: #FFF;
    padding: 24rpx;
    box-sizing: border-box;
    margin: 16rpx 0;

    .blue-top-background {
      margin: -24rpx;
      padding: 24rpx;
      position: relative;
      width: 100%;

      & > .img {
        margin: -24rpx;
        position: absolute;
        z-index: -1;
        width: 100%;
      }
    }

    .index-box-three-item {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;

      &.gap {
        gap: 0 24rpx;
        margin-top: 16rpx;
      }


      & > .left {
        display: flex;
        align-items: center;
        font-weight: bold;
        color: #1D2129;

        & > image {
          width: 76rpx;
          height: 64rpx;
          margin-right: 10rpx;

          &.wid {
            width: 80rpx;
            height: 80rpx;
          }
        }

        & > text {
          line-height: 1;
        }
      }

      & > .right {
        display: flex;
        align-items: center;
        gap: 0 16rpx;
        font-weight: 500;

        text {
          line-height: 1;

          &:nth-child(1), &:nth-child(4) {
            color: #86909C;
          }

          &:nth-child(2) {
            font-size: 48rpx;
            color: #1579FA;
            font-weight: bold;
          }

          &:nth-child(3) {
            color: #1579FA;
          }
        }
      }

      .grey-box {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 0 24rpx;
        padding: 36rpx 0 36rpx 36rpx;
        box-sizing: border-box;
        background: #F7F8FA;
        border-radius: 16rpx;
        justify-content: center;
        position: relative;
        width: 100%;

        & > .img {
          margin: -36rpx 0 -36rpx -36rpx;
          position: absolute;
          width: 100%;
        }

        text {
          &:nth-child(3) {
            color: #1579FA;
            font-size: 36rpx;
            font-weight: bold;
            padding-top: 10rpx;

            text {
              font-size: 24rpx;
            }
          }
        }
      }

      .blue-grey-box {
        background-color: #1681fa;
        color: #ffffff;

        text {
          &:nth-child(3) {
            color: #ffffff;
          }
        }
      }
    }
  }

  .index-box-four {
    width: 100%;
    border-radius: 16rpx;
    background: #FFF;
    padding: 24rpx;
    box-sizing: border-box;


    & > .bottom {
      margin-top: 30rpx;
      width: 100%;
      box-sizing: border-box;

      & > .bottom-item {
        width: 100%;
        height: 80rpx;
        background: #F7F8FA;
        /*padding: 20rpx 27rpx;*/
        display: flex;
        /*justify-content: space-between;*/
        font-size: 28rpx;
        box-sizing: border-box;
        border-radius: 16rpx;
        color: #3D3D3D;
        margin-bottom: 16rpx;

        .yjqk-left {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 15%;

          &-img {
            width: 42rpx;
            height: 42rpx;
          }
        }

        .yjqk-cont {
          width: 60%;
          line-height: 80rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .yjqk-right {
          width: 25%;
          line-height: 80rpx;
          text-align: right;
          padding-right: 30rpx;

          text {
            font-weight: bold;
            font-size: 30rpx;
            margin-right: 12rpx;
          }
        }
      }
    }

    .index-box-four-item {
      color: #1D2129;
    }
  }
}

.table-empty {
  height: 650rpx;
  width: 100%;
  display: flex;
  justify-content: center;
}

:deep(.index-input) {
  width: 100%;
  color: #fff;

  .uni-input-placeholder, .input-placeholder, .uni-input-input, .uv-input__content__field-wrapper__field {
    color: #FFFFFF !important;
  }

  .uv-input--square {
    border-radius: 16rpx;
  }

  .uv-border {
    border-color: #FFFFFF !important;
  }
}

.empty-image {
  margin-top: 96rpx;
  width: 352rpx;
  height: 300rpx;
}

.list-three {
  width: 100%;
  margin: 28rpx 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 26rpx;
  font-size: 28rpx;
  color: #3D3D3D;
  font-weight: 600;

  &-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 196rpx;
    height: 164rpx;
    border-radius: 16rpx;
    background: linear-gradient(to right, #F6F7FA, #F2F6FA);
    position: relative;

    &-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 196rpx;
      height: 164rpx;
    }

    &-name {
      font-size: 28rpx;
      color: #2E2E3A;
      margin-left: 28rpx;
    }

    &-num {
      font-size: 28rpx;
      color: #1579FA;
      margin-top: 10rpx;
      margin-left: 28rpx;

      span {
        font-size: 36rpx;
        padding-right: 5rpx;
      }
    }
  }
}

.list-four {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 28rpx;
  color: #3D3D3D;
  font-weight: 600;

  &-item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 25%;
    padding: 38rpx 0 10rpx 0;

    .list-four-img {
      width: 62rpx;
      height: 62rpx;
    }

    .list-four-num {
      color: #1579FA;
      font-size: 24rpx;
      margin: 12rpx 0;

      text {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .list-four-name {
      color: #2E2E3A;
      font-size: 28rpx;
    }
  }
}

.title-tab {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  align-items: center;

  & > text {
    font-weight: 600;
  }

  &-left {
    display: flex;
    align-items: center;
    font-weight: bold;

    .title-img {
      width: 42rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
  }

  &-right {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    gap: 0 8rpx;

    .right-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 112rpx;
      height: 48rpx;
      text-align: center;
      border-radius: 4rpx;
      background: #F7F8FA;
      color: #1579FA;

      &:nth-child(1) {
        margin-right: 5rpx;
      }

      &.active {
        color: #fff;
        background: #1579FA;
      }
    }
  }
}
</style>
